<template>
  <div class="page-tools">
    <!-- 选中微信 -->
    <div class="toggle-wechat">
      <template v-if="notShowSelect.indexOf(currentNav) < 0">
        <p>当前微信号:</p>
        <!-- 选择微信 -->
        <el-select
          v-model="currentWeChatId"
          class="el-select-wechats-list"
          size="small"
          style="margin-left: 10px"
          clearable
          placeholder="请选择微信"
          @change="queryInfoByWechatId($event)"
        >
          <el-option
            v-for="(wechat, index) in wechats"
            :key="index"
            :label="wechat.WeChatNick"
            :value="wechat.WeChatId"
            :disabled="!wechat.IsOnline"
          ></el-option>
        </el-select>
        <!-- 刷新 -->
        <!-- <el-button
          v-if="$route.name === 'tools' && freshMap.indexOf(currentNav) >= 0"
          type="primary"
          size="mini"
          style="margin-left: 10px"
          :disabled="!canRefresh"
          :loading="!canRefresh"
          @click="refresh(currentWeChatId)"
        >
          <span v-if="canRefresh" class="el-icon-refresh"></span>
          <span v-if="canRefresh">{{ refreshMap[currentNav] }}</span>
          <span v-else>{{ timeOut }}秒后再试</span>
        </el-button> -->
      </template>
    </div>
    <!-- 页面 -->
    <component :is="currentNav"></component>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'

const newFriend = () => import(/* webpackChunkName: "tools" */ './components/NewFriend.vue')
const addFriend = () => import(/* webpackChunkName: "tools" */ './components/AddFriend.vue')
const addFriendAuto = () => import(/* webpackChunkName: "tools" */ './components/AddFriendAuto.vue')
const sopAddFriend = () => import(/* webpackChunkName: "tools" */ './components/SopAddFriend.vue')
const searchPhones = () => import(/* webpackChunkName: "tools" */ './components/SearchPhones.vue')
const autoHi = () => import(/* webpackChunkName: "tools" */ './components/AutoHi.vue')
const autoTask = () => import(/* webpackChunkName: "tools" */ './components/AutoTask.vue')
const autoReply = () => import(/* webpackChunkName: "tools" */ './components/AutoReply.vue')
const phoneManagement = () => import(/* webpackChunkName: "tools" */ './components/PhoneManagement.vue')
const qrCode = () => import(/* webpackChunkName: "tools" */ './components/QrCode.vue')
const takeLabels = () => import(/* webpackChunkName: "tools" */ './components/TakeLabels.vue')
const friendsFilter = () => import(/* webpackChunkName: "tools" */ './components/FriendsFilter.vue')
const autoTaskList = () => import(/* webpackChunkName: "tools" */ './components/AutoTaskList.vue')
const clearFans = () => import(/* webpackChunkName: "tools" */ './components/ClearFans.vue')
const materialLibrary = () => import(/* webpackChunkName: "tools" */ './components/MaterialLibrary.vue')
const dataStat = () => import(/* webpackChunkName: "tools" */ './components/DataStat.vue')
const forwardLog = () => import(/* webpackChunkName: "tools" */ './components/ForwardLog.vue')
export default {
  components: {
    newFriend,
    addFriend,
    addFriendAuto,
    sopAddFriend,
    searchPhones,
    autoHi,
    autoReply,
    autoTask,
    clearFans,
    materialLibrary,
    phoneManagement,
    qrCode,
    takeLabels,
    friendsFilter,
    autoTaskList,
    dataStat,
    forwardLog
  },
  data() {
    return {
      notShowSelect: [
        'dataStat',
        'forwardLog',
        'newFriend',
        'addFriendAuto',
        'sopAddFriend',
        'phoneManagement',
        'friendsFilter',
        'autoHi',
        'autoTaskList',
        'materialLibrary',
      ] // 不需要展示选择微信的页面
    }
  },
  computed: {
    ...mapState('tools', {
      currentNav: 'currentNav'
    }),
    ...mapGetters({
      wechats: 'conversation/wechats' // 当前账号下的微信列表
    }),
    currentWeChatId: {
      get() {
        return this.$store.getters['tools/currentWeChatId']
      },
      set(v) {
        this.$store.commit('tools/SET_CURRENT_WECHAT_IDS', { nav: this.currentNav, weChatId: v })
      }
    }
  },
  methods: {
    // 根据微信id查询数据
    queryInfoByWechatId(wechatId) {
      if (!wechatId) return
      switch (this.currentNav) {
        case 'addFriend':
          // 从nedb查询%s的添加好友的历史任务列表'
          this.$store.dispatch('nedb/SetAddFriends', wechatId)
          break
        case 'takeLabels':
          // 设置labels
          this.$store.dispatch('nedb/SetToolsLabels', wechatId)
          // 设置好友
          this.$store.dispatch('nedb/SetToolsFriends', wechatId)
          // 设置群聊
          this.$store.dispatch('nedb/SetToolsRooms', wechatId)
          break
        case 'clearFans':
          // 从nedb查询%s的清理僵尸粉任务列表'
          this.$store.dispatch('nedb/SetZombies', wechatId)
          break
        case 'qrCode':
          // 从nedb查询%s的二维码'
          this.$store.dispatch('nedb/SetQrCode', wechatId)
          //  刷新数据
          if (wechatId) {
            this.$store.dispatch('websocket/PullWeChatQrCodeTask', wechatId)
          }
          break
        default:
          // this.$message({
          //   message: `所有的微信生效,无需选中微信!`,
          //   type: 'warning'
          // })
          break
      }
    },
    // 为了刷新页面数据 重置wechatid
    resetWeChatId() {
      this.currentWeChatId = ''
      // 设置好友
      this.$store.dispatch('nedb/SetToolsFriends', '')
    }
  }
}
</script>

<style lang="scss" scoped>
.page-tools {
  flex: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;

  .toggle-wechat {
    height: 40px;
    min-height: 40px;
    font-size: 14px;
    color: #333333;
    display: flex;
    align-items: center;
    padding-left: 20px;
    background-color: #fffaf2;
  }
}
</style>
